<template>
    <entity-view
      :operator-type="operatorType"
      :model="beanInfo"
      @submit="submit"
      :rules="rules"
      ref="form"
    >
      <div class="subtitle">基本信息</div>
      <div class="sub-content-flex">
        <form-item label="标准产品编码" v-model="beanInfo.prodCode" prop="prodCode" disabled></form-item>
        <form-item label="标准产品名称" v-model="beanInfo.prodName" prop="prodName"></form-item>
        <form-item label="标准产品描述" v-model="beanInfo.prodDesc" prop="prodDesc"></form-item>
        <form-item v-if="operatorType === 'chk'" label="审批意见" v-model="beanInfo.auditRefuseReason" input-type="textarea"></form-item>
      </div>
      <div class="subtitle">选择基础产品信息</div>
      <div class="sub-content-block">
        <a-table :columns="feeRateColumns" :dataSource="baseProductInfo" rowKey="(record,index) => {return index}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
          <template slot="operation" slot-scope="text, record">
            <a-icon
              type="setting"
              theme="twoTone"
              twoToneColor="#4a9ff5"
              @click="setting(record)"
              title="配置"
              v-if="operatorType === 'add' || operatorType === 'edit' "
            ></a-icon>
            <a-icon
              type="eye"
              theme="twoTone"
              twoToneColor="#4a9ff5"
              @click="view(record)"
              title="查看"
            ></a-icon>
          </template>
        </a-table>
      </div>
      <a-modal :maskClosable="false"  :footer="isHideFoot?null:undefined" v-model="modalVisible" :title="modalTitle" width="1200px" @ok="modalSubmit" :okText="okText">
        <base-products-operation ref="modalForm" modal-name="基础产品"></base-products-operation>
      </a-modal>
    </entity-view>
</template>
<script>
import EntityView from '../../../../components/common/entityView/EntityView.vue'
import FormItem from '../../../../components/common/entityView/FormItem.vue'
import BaseProductsOperation from './BaseProductsOperation'
export default {
  name: 'Operation',
  components: {
    BaseProductsOperation,
    EntityView,
    FormItem
  },
  props: {
    query: Object,
  },
  data: function () {
    return {
      modalVisible: false,
      isHideFoot: false,
      modalTitle: '',
      okText: '',
      operatorType: 'add',
      beanInfo: {
        baseProdCode: '',
        prodCode: '',
        prodName: '',
        prodDesc: '',
      },
      rules: {
        prodCode: [{required: true, message: '必填', trigger: 'blur'}],
        prodName: [{required: true, message: '必填', trigger: 'blur'}],
        prodDesc: [{required: true, message: '必填', trigger: 'blur'}],
      },
      selectOptions: [],
      loading: false,
      pageInfo: {},
      feeRateColumns: [
        {
          title: '基础产品代码',
          dataIndex: 'baseProdCode',
          customRender(text) {
            return text ? [
              '00-基础公共',
              '01-刷卡支付',
              '02-付款扫码(主扫)',
              '03-收款扫码(被扫)',
              '04-信用卡分期',
              '05-银行卡支付',
              '06-XX手机银行支付',
              '07-微信支付',
              '08-支付宝支付',
              '09-银联云闪付',
              '10-代付POS',
            ][+text] : ''
          }
        },
        {
          title: '基础产品名称',
          dataIndex: 'baseProdName',
        },
        {
          title: '基础产品描述',
          dataIndex: 'baseProdDesc',
        },
        {
          title: '产品状态',
          dataIndex: 'prodStatus',
          customRender(text) {
            return text ? {
              '00': '非正式',
              '01': '正式',
              '02': '停用',
              '03': '已注销',
              'M': '已添加',
            }[text] : '未配置'
          }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      baseProductInfo: [],
      selectedRowKeys: [],
      modalName: "基础产品",
    }
  },
  methods: {
    async submit () {
      let res = await this.$refs.form.validate();
      if(res){
        switch (this.operatorType) {
          case 'add':
            let isFlag = await this.prodNameCheck();
            if(!isFlag){
              return isFlag
            }
            res = await this.add()
            break
          case 'edit':
            res = await this.edit()
            break
          case 'cancel':
            res = await this.edit()
            break
          case 'view':
            res = true
            break
          default:
            break
        }
      }
      return res
    },
    add: async function () {
      let isFlag = false
      if(this.selectedRowKeys.length === 0){
        this.$message.error('请勾选产品并对勾选的产品进行配置')
        return false
      }else{
        this.selectedRowKeys.map(i => {
          if(this.baseProductInfo[i].prodStatus !== 'M'){
            isFlag = true
          }
        })
      }
      if(isFlag){
        this.$message.error('请对勾选的产品进行配置')
        return false
      }
      let prodInfoList = [];
      this.baseProductInfo.map(i => {
        if (i.prodStatus === 'M') {
          prodInfoList.push(i);
        }
      })
      if (prodInfoList.size === 0) {
        this.$message.error('未添加基础产品')
        return false
      }
      const params = {
        prodInfoList: prodInfoList,
        optFlag: {add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operatorType]
      }
      const res = await this.$post('/admin/mcmp/bProdInfo/subListEdit', params)
      if (res.status === 200) {
        this.$message.success('保存成功！')
        return true
      } else {
        this.$message.error(res.data.message)
        return false
      }

    },
    async edit () {
        const params = {
          prodInfoList: this.baseProductInfo,
          optFlag:{add: `add`, edit: `upd`, view: `view`, use: `use`, stop: `stop`, cancel: `cancel`}[this.operatorType]
        }
        const res = await this.$post('/admin/mcmp/bProdInfo/subListEdit', params)
        if (res.status === 200) {
          this.$message.success('保存成功！')
          return true
        } else {
          this.$message.error(res.data.message)
          return false
        }

    },
    resetFields () {
      return this.$refs.form && this.$refs.form.resetFields()
    },
    async setBeanInfo ({...beanInfo}) {
      this.$store.commit('setting/setFullscreenLoading', true)
      this.beanInfo = beanInfo
      if(this.operatorType === 'add'){
        await this.subListEdit()
      }
      await this.getOne()
      this.$store.commit('setting/setFullscreenLoading', false)

    },
    async getOne () {
      try {
        const param = {
          instId: this.beanInfo.instId,
          optFlag: this.operatorType,
          prodCode: this.beanInfo.prodCode
        }
        if(this.operatorType !== 'add'){
          param.auditStatus = this.beanInfo.auditStatus
        }
        const res = await this.$get('/admin/mcmp/bProdInfo/sublist', param)
        this.baseProductInfo = res.data.rows || {}
      } catch (e) {
        console.error(e)
      }
    },
    async subListEdit () {
      try {
        const param = {
          instId: this.beanInfo.instId,
          optFlag: this.operatorType,
        }
        const res = await this.$get('/admin/mcmp/bProdInfo/subListEdit', param)
        this.beanInfo = res.data.entity || {}
      } catch (e) {
        console.error(e)
      }
    },
    async onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    /**
     *产品名称唯一性验证
     */
    async prodNameCheck () {
      const param = {
        instId: this.beanInfo.instId,
        prodName: this.beanInfo.prodName,
        prodCode: this.beanInfo.prodCode,
      }
      const res = await this.$get('/admin/mcmp/bProdInfo/prodNameCheck', param);

      if(res.data.message === '验证成功'){
        return true
      }else{
        return false
      }
    },
    setting (item) {
      if(typeof this.beanInfo.prodName === 'undefined' || this.beanInfo.prodName === ''){
        this.$message.error("必须先填写标准产品名称");
        return false;
      }
      this.openModal('edit', item)
    },
    view (item) {
      this.openModal('view', item)
    },
    openModal(type = 'view', beanInfo) {
      console.log(beanInfo);
      this.modalTitle = {add: `新增${this.modalName}`, edit: `编辑${this.modalName}`, view: `${this.modalName}详情`, stop: `${this.modalName}停用`, start: `${this.modalName}启用`}[type]
      this.modalVisible = true
      this.okText = {add: '保存', edit: '保存', view: '关闭', stop: '停用', start: '启用'}[type]
      if(type === 'view'){
        this.isHideFoot = true
      }else{
        this.isHideFoot = false
      }
      this.$nextTick(() => {
        this.$refs.modalForm.operatorType = type
        if (type === 'edit' || type === 'view' || type === 'stop' || type === 'start') {
          beanInfo.prodCode = this.beanInfo.prodCode
          beanInfo.prodName = this.beanInfo.prodName
          beanInfo.prodDesc = this.beanInfo.prodDesc
          this.$refs.modalForm.setBeanInfo(beanInfo)
        }
        this.$refs.modalForm.resetFields()
      })
    },
    async modalSubmit () {
      const res = await this.$refs.modalForm.submit()
      if (res) {
        this.modalVisible = false
        await this.getOne()
      }
    },
  }
}
</script>

<style scoped>
.subtitle {
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  padding: 0 10px;
}
.sub-content-flex {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.sub-content-block {
  display: block;
  flex-wrap: wrap;
  width: 100%;
}
.ant-table-wrapper{
  width: 100%;
}
</style>
